<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="main" style="height: 400px;width: 500px"></div>
</body>
<script src="../echarts/dist/echarts.min.js"></script>
<script>
    var mychart=echarts.init(document.getElementById('main'));
    option={
        title:{//表格标题==============================================
            text:'我就是实验看看',//标题文字内容
            show:true,//标题是否显示，
            link:'http://www.baidu.com',//超链接
            left:'center',//水平位置
            top:'top',//竖直位置
            backgroundColor:'white'//背景色
        },
        tooltip:{//提示框,鼠标悬停时==================================
            trigger:'item'//气泡工具触发方式axis
        },
        toolbox:{//工具箱===========================================
            show:true,
            feature:{
                mark:{show:true},
                dataView:{show:true,readOnly:false},
                magicType:{show:true,type:['line','bar']},
                restore:{show:true},
                saveAsImage:{show:true}
            }
        },
        calculable:true,
        legend:{//图例啊===============================================
            show:true,
            top:'340px',
            left:'0px',
            data:['budget 2011','budget 2012'],
            itemGap:5,
            orient:'horizontal'
        },
        grid:{//直角坐标系内绘制图网格==============================
            top:'12%',
            left:'1%',
            right:'10%',
            containLabel:true,
            borderColor:'#CCC'
        },
        xAxis:[
            {
                type:'category',
                scale:false,
                data:['成都','绵阳','遂宁','德阳','自贡']
            }
        ],
        yAxis:[
            {
                type:'value',
                name:'budget(million usd)'
            }
        ],
        dataZoom:[//数据区域缩放功能，只对直角坐标系有用===
            {//这里是控制X轴的==========
                show:true,
                start:4,//开始位置
                end:100,//结束位置
                hanleSize:3,//控制手柄大小
                backgroundColor:'green',//背景色
                showDetail:true,
                height:20
            },
            {//这里是控制Y轴的
                show:true,
                yAxisIndex:0,
                filterMode:'empty',
                width:12,
                height:'70%',
                hanleSize:1,
                showDataShadow:false,
                left:'93%'
            }
        ],
        series:[
            {
                name:'budget 2011',
                type:'bar',
                data:[20,40,22,33,55]
            },
            {
                name:'budget 2012',
                type:'bar',
                data:[11,22,23,54,43]
            }
        ]
    };
    mychart.setOption(option)
</script>
</html>